<template>
  <div class="container">

    <!-- textarea输入框部分-->
    <div class="input-box clear">
      <div class="input-title" v-html="titleOptions.inputTitle"></div>
      <textarea placeholder="不超过240字" v-model="inputContent" contenteditable="true"></textarea>
      <div class="input-count right"><span class="orange-style">{{currentWords}}</span>/240</div>
    </div>

    <!-- 添加图片部分-->
    <div class="input-box  clear">
      <div class="input-title" v-html="titleOptions.imagesTitle"></div>
      <div class="img-list">
        <div class="img-item" v-for="(item,index) in imgList">
          <i @click="deleteImage(index)"></i>
          <img :src="item.file_path">
        </div>
        <div class="add-img" v-if="!imagesIsEnough">
          <div class="add-view">
            <div class="line">
              <div class="line-1"></div>
              <div class="line-2"></div>
            </div>
            <p>相册 / 手机</p>
          </div>
          <input type="file" ref="fileBtn" id="fileBtn" accept="image/jpg,image/jpeg,image/png,image/gif"
                 @change="upload($event)"/>
        </div>
      </div>
      <div class="input-count right">
        <span class="orange-style">{{currentImages}}</span>/4
      </div>
    </div>

    <!-- 提交按钮部分-->
    <div class="submit">
      <input type="submit" :disabled="!canSubmit" :class="{'can-submit': canSubmit}" @click="submit">
    </div>

    <!-- 联系客服部分-->
    <div class="call-service pl">
      若您的问题急需解决，可致电<span @click="callService" class="orange-style">10086</span>
    </div>

    <messageBox :messageOptions="messageOptions"></messageBox>
  </div>
</template>
<script>
  import Utils from "../../utils/imgutils.js"
  import {MessageBox} from 'mint-ui'
  import {getMobileType} from '../../utils/common.js'
  import $ from 'jquery'
  import messageBox from './msg.vue'

  export default {
    name: 'submit',
    data() {
      return {
        imageObj: {},
        currentWords: 0,
        currentImages: 0,
        inputContent: '',
        canSubmit: false,
        imgList: [],
        uploadImgs: [],
        imagesIsEnough: false,
        messageOptions: {}
      }
    },
    components: {
      messageBox
    },
    created() {

    },
    mounted() {
      this.imageObj = new Utils(this.$refs.fileBtn)

      // 输入文本自适应高度
      $('textarea').on('input propertychange', function () {
        $(this).innerHeight(this.scrollHeight)
      })
    },
    props: ['titleOptions', 'selectData', 'others'],
    watch: {
      inputContent: function (newValue) {
        var len = newValue.length

        if (len > 240) {
          this.inputContent = this.inputContent.slice(0, 240)
          this.currentWords = 240
        } else {
          this.currentWords = len
        }

        this.checkData()
      },
      selectData: function () {
        this.checkData()
      },
      imgList: function () {
        var len = this.imgList.length

        this.imagesIsEnough = len > 3
        this.currentImages = len

        this.checkData()
      }
    },
    methods: {
      checkData() {

        var flag1, flag2, flag3;

        flag1 = this.others ? false : this.selectData[0].length == 0 && this.selectData[1].length == 0
        flag2 = this.currentWords == 0
        flag3 = this.currentImages == 0

        console.log(flag1 + '---' + flag2 + '---' + flag3)

        if (flag1 && flag2 && flag3) {
          return this.canSubmit = false
        }

        return this.canSubmit = true
      },
      callService() {
        var mobileType = getMobileType()

        // 解决ios打电话自带弹框
        if (mobileType == 1) {
          window.location.href = 'tel:10086'
        } else {
          this.messageOptions = {
            message: '10086',
            confirmButtonText: '呼叫',
            cancelButton: true,
            confirmCallback: function () {
              window.location.href = 'tel:10086'
            }
          }
        }
      },
      upload(t) {
        console.log(1)
        if (!t.target.value) return

        var isExsit

        this.imageObj.loadFile(t, d => {

          // 清空value保证用户在删除了上一次上传的照片以后可以继续上传上一次的照片
          t.target.value = null

          // 如果上传的照片已经上传过 不再上传
          isExsit = this.uploadImgs.some(v => {
            return v.indexOf(d.name) != -1
          })
          if (isExsit) return

          this.imgList.push({file_path: d.imgUrl})
          this.uploadImgs.push(d.name + ":" + d.src)
        }, 10)
      },
      deleteImage(index) {
        this.imgList.splice(index, 1)
        this.uploadImgs.splice(index, 1)
      },

      submit() {
        if (!navigator.onLine) {
          return this.messageOptions = {
            title: '提示',
            message: '当前网络未连接，请检查网络'
          }
        }
      }

      /*
       * 提交之后网络问题的toast
      * 1：断网，'当前网络未连接，请检查网络'。
      * 2：网络异常，提示“网络繁忙，请稍后再试”。
      * 3：服务器异常，提示“系统开小差，请稍后再试”
      * */
    }
  }
</script>
<style scoped lang="scss">
  @import '../../assets/css/config';

  .container {
    .orange-style {
      color: #f9a92d;
    }
    .submit {
      margin: r(50) auto;
      width: r(343);
      height: r(48);
      input {
        display: block;
        width: 100%;
        height: 100%;
        line-height: r(48);
        text-align: center;
        border-radius: r(48);
        font-size: r(19);
        &.can-submit {
          background: $orangeColor;
        }
      }
    }
    .input-box {
      background-color: #fff;
      .input-title {
        @extend .title-style;
      }
      textarea {
        width: 100%;
        height: r(54);
        overflow-y: hidden;
        padding: r(8) r(15) 0;
        color: #1c1c1c;
        font-size: r(15);
      }
      .input-count {
        color: #3A3A3A;
        font-size: r(11);
        letter-spacing: -0.25px;
        margin: 0 r(15) r(8) 0;
      }
      .img-list {
        width: 100%;
        padding: r(8);
        display: flex;
        /*justify-content: space-between;*/
        .img-item {
          width: r(73);
          height: r(73);
          margin: 0 r(8);
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          i {
            width: r(15);
            height: r(15);
            position: absolute;
            top: 0;
            right: 0;
            background: url("../../assets/images/delete.png") no-repeat;
            background-size: 100% 100%;
          }
        }
        .add-img {
          margin: 0 r(8);
          width: r(73);
          height: r(73);
          border: 1px solid #efefef;
          position: relative;
          .add-view {
            width: 100%;
            height: 100%;
            .line {
              width: 100%;
              height: r(50);
              position: relative;
              .line-1 {
                width: r(22);
                height: r(1.8);
                background-color: #c7c7c7;
                @extend .center;
              }
              .line-2 {
                width: r(1.8);
                height: r(22);
                background-color: #c7c7c7;
                @extend .center;
              }
            }
            p {
              font-size: r(12);
              line-height: r(17);
              color: #c7c7c7;
              text-align: center;
            }
          }
          > input {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
      }
    }
    .call-service {
      margin-bottom: r(40);
      font-size: r(15);
    }
  }

</style>
